<template>
  <div class="dev">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 搜索框 -->
      <div class="search">
        <div class="condition">
          <!-- 租户 -->
          <el-select @change="
            pageNum = 1;
          search();
          " clearable v-model="tenantId" placeholder="请选择租户">
            <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.tenantName" :value="item.tenantId">
            </el-option>
          </el-select>
          <!--设备型号-->
          <el-select multiple collapse-tags @change="
            pageNum = 1;
          search();
          " clearable v-model="modelIds" placeholder="请选择型号">
            <el-option v-for="item in modelList" :key="item.modelId" :label="item.modelName" :value="item.modelId">
            </el-option>
          </el-select>
          <!-- 状态 -->
          <el-select v-if="modelIds.indexOf(2) < 0 && modelIds.indexOf(4) < 0" @change="
            pageNum = 1;
          search();
          " clearable v-model="online" placeholder="请选择状态">
            <el-option v-for="item in onLineSelect" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <!-- 厂商 -->
          <el-select @change="
            pageNum = 1;
          search();
          " v-model="productId" filterable clearable placeholder="请选择厂商">
            <el-option v-for="item in productSelect" :key="item.productId" :label="item.productName"
              :value="item.productId">
            </el-option>
          </el-select>

          <el-button type="success" icon="el-icon-star-on" @click="DialogVisibleSearch = true">高级搜索</el-button>
          <el-button type="primary" icon="el-icon-search" @click="search">搜索 / 刷新</el-button>
        </div>
      </div>
      <el-tab-pane :label="item.label" :name="item.name" v-for="(item, index) in titleList" :key="index">
        <!-- 表格数据 -->
        <div class="table" ref="table">
          <el-table :data="tableData" height="calc(100%-10rem)" ref="isExpand" v-loading="loading" border
            highlight-current-row stripe style="width: 100%">
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column width="180" align="center" prop="meterName" label="名称">
            </el-table-column>
            <el-table-column width="180" align="center" prop="meterNumber" label="设备表号">
            </el-table-column>
            <el-table-column width="180" align="center" prop="meterModel" label="类型">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.meterModel }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column width="180" align="center" prop="isOnline" label="状态"
              v-if="modelIds.indexOf(2) < 0 && modelIds.indexOf(4) < 0">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.isOnline == true &&
                  (scope.row.meterModelId == 1 ||
                    scope.row.meterModelId == 3 ||
                    scope.row.meterModelId == 5 || scope.row.meterModelId == 7 ||scope.row.meterModelId == 8)
                  ">在线</el-tag>
                <el-tag type="danger" v-if="scope.row.isOnline == false &&
                  (scope.row.meterModelId == 1 ||
                    scope.row.meterModelId == 3 ||
                    scope.row.meterModelId == 5 || scope.row.meterModelId == 7 || scope.row.meterModelId == 8)
                  ">离线</el-tag>
                <el-tag v-if="scope.row.meterModelId == 2 ||
                  scope.row.meterModelId == 4 ||
                  scope.row.meterModelId == 6
                  ">蓝牙表</el-tag>
              </template>
            </el-table-column>
            <el-table-column width="180" align="center" prop="tenantName" label="租户名称">
            </el-table-column>
            <el-table-column width="180" align="center" prop="landlordPhone" label="房东手机号">
            </el-table-column>
            <el-table-column width="180" align="center" prop="status" :label="meterType == 1 ? '拉合闸状态' : '开关阀状态'">
              <template slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.status == 0 && meterType == 1">拉闸</el-tag>
                <el-tag type="success" v-if="scope.row.status == 1 && meterType == 1">合闸</el-tag>
                <el-tag type="danger" v-if="scope.row.status == 0 && meterType == 2">关阀</el-tag>
                <el-tag type="success" v-if="scope.row.status == 1 && meterType == 2">开阀</el-tag>
              </template>
            </el-table-column>
            <el-table-column width="180" align="center" prop="productName" label="生产厂商">
            </el-table-column>
            <el-table-column width="180" align="center" prop="meterAddress" label="设备地址">
            </el-table-column>
            <el-table-column width="250" align="center" prop="description" label="备注">
            </el-table-column>
            <el-table-column width="250" align="center" prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column width="250" align="center" prop="isWaterMultiplier" label="纠正" v-if="meterType == 2">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isWaterMultiplier" active-color="#13ce66" inactive-color="#DCDFE6"
                  @change="switchItem2(scope.row)"
                  :disabled="(scope.row.ver && scope.row.ver.slice(0, 2) == 'WF' && Number(scope.row.ver.slice(scope.row.ver.length - 4)) <= 13) ? false : ((scope.row.ver && scope.row.ver.slice(0, 2) == 'WE' && Number(scope.row.ver.slice(scope.row.ver.length - 4)) <= 12) ? false : true)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column width="250" align="center" prop="readingTime" label="抄表时间">
            </el-table-column>
            <el-table-column width="250" align="center" prop="bindTime" label="房东绑定时间">
            </el-table-column>
            <!-- <el-table-column width="180" sortable align="center" prop="createTime" label="创建时间">
            </el-table-column> -->
            <el-table-column width="180" fixed="right" align="center" label="操作">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="备注" placement="top">
                  <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="详情" placement="top">
                  <el-button type="success" size="mini" icon="el-icon-s-data" circle @click="more(scope.row)"></el-button>
                </el-tooltip>
                <el-dropdown trigger="click">
                  <el-button type="info" size="mini" icon=" el-icon-more" class="moreDo" circle>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="copy(scope.row)"
                      :disabled="scope.row.isOnline == true ? false : true">抄表</el-dropdown-item>
                    <el-dropdown-item @click.native="fix(scope.row)"
                      :disabled="scope.row.isOnline == true ? false : true">电量校准</el-dropdown-item>
                    <el-dropdown-item :disabled="scope.row.isOnline == true ? false : true"
                      @click.native="customize(scope.row)">自定义指令</el-dropdown-item>
                    <el-dropdown-item :disabled="scope.row.isOnline == true ? false : true"
                      @click.native="reload(scope.row)">重启</el-dropdown-item>
                    <el-dropdown-item @click.native="upDate(scope.row)"
                      :disabled="scope.row.isOnline == true ? false : true">升级</el-dropdown-item>
                    <el-dropdown-item @click.native="upDateRecord(scope.row.meterId)">升级记录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination v-show="tableData.length !== 0" background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 30, 50, 100, 150, 200]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 高级搜索 -->
    <div class="searchMore">
      <el-dialog @close="closeSearch" :close-on-click-modal="true" title="搜索更多" :visible.sync="DialogVisibleSearch"
        width="800px">
        <el-form :model="searchForm" ref="chargeForm" label-width="100px" class="demo-ruleForm">
          <!-- 表号 -->
          <el-form-item label="表号">
            <el-input placeholder="请输入表号" clearable v-model="meterNumber">
            </el-input>
          </el-form-item>
          <!-- 名称 -->
          <el-form-item label="名称">
            <el-input placeholder="请输入名称" clearable v-model="meterName">
            </el-input>
          </el-form-item>
          <!-- 地址 -->
          <el-form-item label="地址">
            <el-input placeholder="请输入地址" clearable v-model="meterAddress">
            </el-input>
          </el-form-item>
          <!-- 拉合闸 -->
          <el-form-item :label="meterType == 1 ? '拉合闸状态' : '开关阀状态'">
            <el-select clearable v-model="status" :placeholder="meterType == 1 ? '请选择拉合闸' : '请选择开关阀'">
              <el-option v-for="item in statusSelect" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 硬件类型 -->
          <el-form-item label="硬件类型">
            <el-select multiple collapse-tags clearable v-model="vers" placeholder="请选择硬件类型">
              <el-option v-for="item in hardWareSelect" :key="item.hardwareKey" :label="item.hardwareName"
                :value="item.hardwareKey">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 备注 -->
          <el-form-item label="备注">
            <el-input placeholder="请输入备注" clearable v-model="description">
            </el-input>
          </el-form-item>
          <!-- iccid -->
          <el-form-item label="iccid" v-if="modelIds.indexOf(2) < 0 && modelIds.indexOf(4) < 0">
            <el-input placeholder="请输入iccid" clearable v-model="iccid">
            </el-input>
          </el-form-item>
          <!-- imei -->
          <el-form-item label="imei" v-if="modelIds.indexOf(2) < 0 && modelIds.indexOf(4) < 0">
            <el-input placeholder="请输入imei" clearable v-model="imei">
            </el-input>
          </el-form-item>
          <!-- 版本号 -->
          <el-form-item label="版本号">
            <el-input placeholder="请输入版本号" clearable v-model="ver">
            </el-input>
          </el-form-item>
          <!-- 手机号 -->
          <el-form-item label="手机号">
            <el-input placeholder="请输入房东手机号" clearable v-model="landlordPhone">
            </el-input>
          </el-form-item>
          <!-- 时间 -->
          <el-form-item label="创建时间">
            <el-date-picker @change="change" clearable v-model="time" type="daterange" align="center" range-separator="-"
              :picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="cancelSearch">重 置</el-button>
          <el-button type="primary" @click="searchDialog">搜 索</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 升级 -->
    <div class="dialog">
      <el-dialog title="升级" :visible.sync="upDialogVisible" width="600px">
        <el-select v-model="otaTaskId" placeholder="请选择">
          <el-option v-for="item in otaList" :value="item.otaTaskId" :key="item.otaTaskId" :label="item.otaTaskName">
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeUp">取 消</el-button>
          <el-button type="primary" @click="upFn" :disabled="otaTaskId ? false : true">立即升级</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 修改备注 -->
    <div class="dialog">
      <el-dialog title="修改备注" :visible.sync="editDialogVisible" width="600px" :close-on-click-modal="false"
        :before-close="close">
        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea">
        </el-input>

        <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="editFn">确 认</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 详情 -->
    <div class="more">
      <el-dialog :title="moreData.meterName" :visible.sync="moreDetail" width="800px">
        <el-descriptions direction="vertical" :column="3" border>
          <el-descriptions-item label="是否在线">
            <el-tag effect="dark" type="success" v-if="moreData.isOnline == true &&
              (moreData.meterModelId == 1 ||
                moreData.meterModelId == 3 ||
                moreData.meterModelId == 5 || moreData.meterModelId == 7 || moreData.meterModelId == 8)
              ">在线</el-tag>
            <el-tag effect="dark" type="danger" v-if="moreData.isOnline == false &&
              (moreData.meterModelId == 1 ||
                moreData.meterModelId == 3 ||
                moreData.meterModelId == 5 || moreData.meterModelId == 7 || moreData.meterModelId == 8)
              ">离线</el-tag>
            <el-tag effect="dark" v-if="moreData.meterModelId == 2 ||
              moreData.meterModelId == 4 ||
              moreData.meterModelId == 6
              ">暂无</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="状态">
            <el-tag effect="dark" type="success" v-if="moreData.status == 1 && meterType == 1">合闸</el-tag>
            <el-tag effect="dark" type="danger" v-if="moreData.status == 0 && meterType == 1">拉闸</el-tag>
            <el-tag effect="dark" type="success" v-if="moreData.status == 1 && meterType == 2">开阀</el-tag>
            <el-tag effect="dark" type="danger" v-if="moreData.status == 0 && meterType == 2">关阀</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="信号">
            <el-tag effect="dark" type="success" v-if="moreData.csq >= 10 && moreData.csq">{{ moreData.csq }}</el-tag>
            <el-tag effect="dark" type="warning" v-if="moreData.csq < 10 && moreData.csq && moreData.csq > 0">{{
              moreData.csq }}</el-tag>
            <el-tag effect="dark" type="danger" v-if="moreData.csq == null || moreData.csq == 0">暂无信号</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="IMEI">{{
            moreData.imei ? moreData.imei : "暂无"
          }}</el-descriptions-item>
          <el-descriptions-item label="ICCID">{{
            moreData.iccid ? moreData.iccid : "暂无"
          }}</el-descriptions-item>
          <el-descriptions-item label="表号">{{
            moreData.meterNumber
          }}</el-descriptions-item>
          <el-descriptions-item :label="meterType == 1 ? '剩余电量(度)' : '剩余水量(m³)'">{{ moreData.elecSurplusCount
          }}</el-descriptions-item>
          <el-descriptions-item :label="meterType == 1 ? '使用电量(度)' : '使用水量(m³)'">
            {{ moreData.elecUseCount }}
          </el-descriptions-item>
          <el-descriptions-item label="单价(元)">{{
            moreData.meterSinglePrice
          }}</el-descriptions-item>
          <el-descriptions-item v-if="meterType == 1" label="电流(A)">{{
            moreData.ampere
          }}</el-descriptions-item>
          <el-descriptions-item v-if="meterType == 1" label="电压(V)">{{
            moreData.voltage
          }}</el-descriptions-item>
          <el-descriptions-item label="版本号">
            <span v-if="!moreData.ver">暂无</span>
            <span v-else>{{ moreData.ver }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
        
            <span >{{ moreData.createTime }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="绑定时间">
        
        <span >{{ moreData.bindTime }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="抄表时间">
        
        <span >{{ moreData.readingTime }}</span>
      </el-descriptions-item>
          
        </el-descriptions>
        <div style="
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            align-items: center;
          ">
          <div class="qrcode" ref="qrCodeUrl"></div>
          <div style="font-weight: bold; color: #000">
            {{ moreData.meterNumber }}
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 升级记录 -->
    <div class="table">
      <el-dialog title="升级记录" :destroy-on-close="true" :visible.sync="dialogUp" width="50%">
        <div class="search">
          <el-input placeholder="请输入任务名称" clearable prefix-icon="el-icon-search" v-model="taskName">
          </el-input>
          <el-button type="primary" icon="el-icon-search" @click="searchRec">搜索</el-button>
        </div>
        <el-table v-loading="loading1" ref="table" :data="recordData" border height="520" :stripe="true"
          style="width: 100%">
          <template slot="empty">
            <el-empty description="暂无记录"></el-empty>
          </template>
          <el-table-column prop="otaTaskName" label="任务名称">
          </el-table-column>
          <el-table-column prop="otaTaskProcess" label="状态">
            <template slot-scope="scope">
              <el-tag type="warning" v-if="scope.row.otaTaskProcess == 0">待升级</el-tag>
              <el-tag v-if="scope.row.otaTaskProcess == 1">升级中...</el-tag>
              <el-tag type="success" v-if="scope.row.otaTaskProcess == 2">升级成功</el-tag>
              <el-tag type="danger" v-if="scope.row.otaTaskProcess == 3">升级失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间"> </el-table-column>
          <el-table-column prop="expireTime" label="过期时间">
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination v-show="recordData.length !== 0" background @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1" :current-page="pageNum1" :page-sizes="[5, 10, 15, 20, 25, 30]"
          :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="total1">
        </el-pagination>
      </el-dialog>
    </div>
    <!-- 自定义 -->
    <div class="dialog">
      <el-dialog title="自定义指令" :visible.sync="customDialog" width="600px">
        <div class="send" style="display: flex; margin-bottom: 50px">
          <el-input clearable placeholder="请输入自定义指令" v-model="customText">
          </el-input>
          <el-button style="margin-left: 20px" type="primary" @click="send">发送</el-button>
        </div>
        <div class="recive">
          <el-input :readonly="true" placeholder="接收指令" v-model="reciveText">
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeCustomDialog">关 闭</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 电量校准 -->
    <div class="fixDialog">
      <el-dialog @close="closeFix" title="电量校准" :visible.sync="fixedDialog" width="600px">
        <el-form :model="fixMeter" label-width="100px" class="demo-ruleForm">
          <el-form-item label="总使用电量">
            <el-input type="number" v-model="fixMeter.useMeter" clearable placeholder="请输入总使用电量"></el-input>
          </el-form-item>
          <el-form-item label="剩余电量">
            <el-input type="number" v-model="fixMeter.surplusMeter" clearable placeholder="请输入剩余电量"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeFix">关 闭</el-button>
          <el-button type="success" @click="toFix" :disabled="fixMeter.useMeter && fixMeter.surplusMeter ? false : true
            ">确 认</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
  
<script>
import {
  getMeterApi,
  editDesApi,
  upDateApi,
  upDateRecordApi,
  getTaskApi,
  customApi,
  reloadApi,
  getTenantsApi,
  getProductApi,
  getHardWareApi,
  getModelApi,
  postWaterApi
} from "../../../../api/system/meter";
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      titleList: [
        {
          label: "电表",
          name: "1",
        },
        {
          label: "水表",
          name: "2",
        },
      ],
      qrShow: false,
      meterNameQr: "二维码",
      fixedDialog: false,
      fixId: "",
      fixMeterNumber: "",
      fixMeter: {
        useMeter: "",
        surplusMeter: "",
      },
      searchForm: {
        hardWare: "",
        status: "",
        description: "",
        iccid: "",
        imei: "",
        ver: "",
        landlordPhone: "",
        time: "",
      },
      DialogVisibleSearch: false,
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
      meterAddress: "",
      meterName: "",
      meterType: 1, //电表/水表
      hardWare: "",
      startDate: "",
      endDate: "",
      time: "",
      vers: [],
      activeName: "1",
      tenantList: [],
      customDialog: false,
      visible: false,
      reciveText: "",
      customText: "",
      pageNum: 1,
      pageSize: 10,
      total: null,
      dialogUp: false,
      loading1: false,
      taskName: "",
      pageNum1: 1,
      pageSize1: 10,
      total1: null,
      recordData: [],
      moreDetail: false,
      moreData: {},
      otaList: [],
      otaTaskId: "",
      loading: false,
      tableData: [],
      textarea: "",
      editDialogVisible: false,
      editId: null,
      upDateId: "",
      recordId: "",
      upDialogVisible: false,
      customId: "",
      elTableHeight: "",
      modelList: [],
      onLineSelect: [
        {
          label: "在线",
          value: 1,
        },
        {
          label: "离线",
          value: 0,
        },
      ],
      description: "",
      iccid: "",
      imei: "",
      landlordPhone: "",
      meterNumber: "",
      modelIds: [],
      online: "",
      productId: "",
      status: "",
      tenantId: "",
      ver: "",
      productSelect: [],
      hardWareSelect: [],
      switchItemLoading1: null,
      statusSelect: [
        {
          label: "拉闸",
          value: "0",
        },
        {
          label: "合闸",
          value: "1",
        },
      ],
      qrcode: "",
    };
  },
  created() {
    this.pageSize = Number(sessionStorage.getItem("pageSize")) || 10;
    this.pageNum = Number(sessionStorage.getItem("pageNum")) || 1;
    this.pageSize1 = Number(sessionStorage.getItem("pageSize1")) || 10;
    this.pageNum1 = Number(sessionStorage.getItem("pageNum1")) || 1;
    if (this.$route.query.online) {
      this.online = 1;
    }
    this.getMeter(
      this.pageNum,
      this.pageSize,
      this.description,
      this.iccid,
      this.imei,
      this.landlordPhone,
      this.meterNumber,
      this.modelIds,
      this.online,
      this.productId,
      this.status,
      this.tenantId,
      this.ver,
      this.vers,
      this.meterType,
      this.meterName,
      this.meterAddress,
      this.startDate,
      this.endDate
    );
    this.getTask();
    this.getTenants();
    this.getProduct();
    this.getHardWare();
    this.getModel();
  },
  destroyed() {
    sessionStorage.removeItem("pageNum");
    sessionStorage.removeItem("pageSize");
    sessionStorage.removeItem("pageNum1");
    sessionStorage.removeItem("pageSize1");
  },
  methods: {
    switchItem2(e) {
      console.log('e', e);
      if (e.isWaterMultiplier == false) {
        this.$confirm('请确认是否解除纠正', `解除`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.switchItemLoading1 = this.$loading({
            lock: true,
            text: `解除中...`,
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          let arr = {
            isMulti: false
          }
          postWaterApi(e.meterId, arr).then(res => {
            if (res.code == 200) {
              this.switchItemLoading1.close();
              this.$message.success(`解除成功!`);
              this.search();
            }
          }).catch(err => {
            this.switchItemLoading1.close();
            this.search();
          })
        }).catch(() => {
          // this.search();
          e.isWaterMultiplier = !e.isWaterMultiplier
        })
      } else {
        this.$confirm('请确认是否纠正', `纠正`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(res => {
          this.switchItemLoading1 = this.$loading({
            lock: true,
            text: `解禁中...`,
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          let arr = {
            isMulti: true
          }
          postWaterApi(e.meterId, arr).then(res => {
            if (res.code == 200) {
              this.switchItemLoading1.close();
              this.$message.success(`纠正成功!`);
              this.search();
            }
          }).catch(err => {
            this.switchItemLoading1.close();
            this.search();
          })
        }).catch(err => {
          // this.search();
          e.isWaterMultiplier = !e.isWaterMultiplier
        })
      }
    },
    closeFix() {
      this.fixedDialog = false;
      this.fixMeter = {
        useMeter: "",
        surplusMeter: "",
      };
    },
    copy(e) {
      let one = `68${e.meterNumber}6811043335C433`;
      let num = this.checkNum(one);
      let copyCode = one + num + "16";
      let loading = this.$loading({
        text: "抄表中...",
        lock: true,
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let arr = {
        data: copyCode,
      };
      customApi(e.meterId, arr)
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.search();
            this.$message.success("抄表成功!");
          } else {
            loading.close();
          }
        })
        .catch((err) => {
          loading.close();
        });
    },
    // 计算十六进制和
    checkNum(e) {
      let len = e.length;
      let newList = [];
      if (len) {
        var chunk = 2;
        for (var i = 0; i < len; i += chunk) {
          newList.push(e.slice(i, i + chunk));
        }
      }
      let ten = [];
      newList.forEach((item) => {
        let six = parseInt(item, 16).toString();
        ten.push(six);
      });
      let num = 0;
      ten.forEach((item) => {
        num += item * 1;
      });
      let hex = num.toString(16);
      return hex.slice(-2);
    },
    // 电量转换
    meter2hex(e) {
      let one = Number(e).toFixed(2).split(".").join("");
      if (one.length < 8) {
        let two = "";
        for (var i = 0; i < 8 - one.length; i++) {
          two += "0";
        }
        let a = two + one;
        let len = a.length;
        let newList = [];
        if (len) {
          var chunk = 2;
          for (var i = 0; i < len; i += chunk) {
            newList.push(a.slice(i, i + chunk));
          }
        }
        let last = [];
        newList.reverse().forEach((item) => {
          let a = (parseInt(item, 16) + 51).toString(16);
          if (Number(a) < 10) {
            a = `0${a}`;
          }
          last.push(a);
        });
        return last.join("");
      }
    },
    // 校准
    toFix() {
      let one = `68${this.fixMeterNumber}68110C4B493553`;
      let useMeter = this.meter2hex(this.fixMeter.useMeter);
      let surplusMeter = this.meter2hex(this.fixMeter.surplusMeter);
      let all = one + useMeter + surplusMeter;
      let num = this.checkNum(all);
      let fixCode = all + num + "16";
      let one1 = `68${this.fixMeterNumber}6811043335C433`;
      let num1 = this.checkNum(one1);
      let copyCode = one1 + num1 + "16";
      this.$confirm(
        `请确认是否校准电量，总用电量：${this.fixMeter.useMeter},剩余电量：${this.fixMeter.surplusMeter}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let loading = this.$loading({
            target: document.querySelector(".fixDialog .el-dialog"),
            lock: true,
            text: "校准中...",
          });
          let arr = {
            data: fixCode,
          };
          let arr1 = {
            data: copyCode,
          };
          customApi(this.fixId, arr).then((res) => {
            if (res.code == 200) {
              customApi(this.fixId, arr1).then((res) => {
                if (res.code == 200) {
                  this.fixedDialog = false;
                  this.$message.success("校准成功!");
                  this.fixMeter = {
                    useMeter: "",
                    surplusMeter: "",
                  };
                  loading.close();
                  this.search();
                } else {
                  this.fixedDialog = false;
                  this.fixMeter = {
                    useMeter: "",
                    surplusMeter: "",
                  };
                  loading.close();
                }
              });
            } else {
              this.fixedDialog = false;
              loading.close();
            }
          });
        })
        .catch(() => {
          this.fixMeter = {
            useMeter: "",
            surplusMeter: "",
          };
        });
    },
    // 电量校准
    fix(e) {
      this.fixId = e.meterId;
      this.fixMeterNumber = e.meterNumber;
      this.fixedDialog = true;
    },
    // 获取模组型号
    getModel() {
      getModelApi().then((res) => {
        if (res.code == 200) {
          if (this.meterType == 1) {
            this.modelList = [
              res.data[0],
              res.data[1],
              res.data[2],
              res.data[3],
              res.data[6],
              res.data[7],
            ];
          } else {
            this.modelList = [res.data[4], res.data[5]];
          }
        }
      });
    },
    // 获取硬件类型
    getHardWare() {
      getHardWareApi().then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.hardWareSelect = res.data;
        }
      });
    },
    // 重置
    cancelSearch() {
      this.meterNumber = "";
      this.meterName = "";
      this.meterAddress = "";
      this.status = "";
      this.description = "";
      this.iccid = "";
      this.imei = "";
      this.ver = "";
      this.vers = [];
      this.landlordPhone = "";
      this.startDate = "";
      this.endDate = "";
      this.time = "";
    },
    closeSearch() {
      this.pageNum = 1;
      this.search();
    },
    // 时间选择器
    change() {
      if (this.time !== null) {
        this.startDate = this.time[0];
        this.endDate = this.time[1];
      } else {
        this.startDate = "";
        this.endDate = "";
      }
      console.log(this.startDate);
    },
    // 切换类型(电表/水表)
    handleClick(e) {
      this.meterType = Number(e.index) + 1;
      if (this.meterType == 1) {
        this.statusSelect = [
          {
            label: "拉闸",
            value: "0",
          },
          {
            label: "合闸",
            value: "1",
          },
        ];
      } else {
        this.statusSelect = [
          {
            label: "关阀",
            value: "0",
          },
          {
            label: "开阀",
            value: "1",
          },
        ];
      }
      this.online = "";
      this.productId = "";
      this.tenantId = "";
      this.modelIds = [];
      this.pageNum = 1;
      this.getModel();
      this.search();
    },
    // 获取租户
    getTenants() {
      getTenantsApi().then((res) => {
        if (res.code == 200) {
          this.tenantList = res.data;
        }
      });
    },
    // 获取生产产商
    getProduct() {
      getProductApi().then((res) => {
        if (res.code == 200) {
          this.productSelect = res.data;
        }
      });
    },
    // 关闭自定义
    closeCustomDialog() {
      this.customDialog = false;
      this.reciveText = "";
      this.customText = "";
    },
    // 自定义
    customize(e) {
      this.customId = e.meterId;
      this.customDialog = true;
    },
    send() {
      this.reciveText = "";
      let arr = {
        data: this.customText,
      };
      customApi(this.customId, arr).then((res) => {
        if (res.code == 200) {
          this.$message.success("发送成功!");
          this.reciveText = res.data;
        }
      });
    },
    // 重启
    reload(e) {
      this.$confirm("请确认是否重启？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          reloadApi(e.meterId).then((res) => {
            if (res.code == 200) {
              this.$message.success("重启成功!");
            }
          });
        })
        .catch((err) => {
          this.$message.success("已取消重启!");
        });
    },
    // 获取工单列表
    getTask() {
      getTaskApi().then((res) => {
        this.otaList = res.data;
      });
    },
    // 打开升级
    upDate(e) {
      this.upDateId = e.meterId;
      this.upDialogVisible = true;
    },
    closeUp() {
      this.upDialogVisible = false;
      this.otaTaskId = "";
    },
    // 升级
    upFn() {
      let arr = {
        otaTaskId: this.otaTaskId,
      };
      upDateApi(this.upDateId, arr).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功!");
          this.upDialogVisible = false;
          this.search();
          this.upDateRecord(this.upDateId);
        }
      });
    },
    // 获取升级记录
    getRecord(id, pageNum, pagesize, taskName) {
      this.loading1 = true;
      upDateRecordApi(id, pageNum, pagesize, taskName).then((res) => {
        this.recordData = res.data.rows;
        this.total1 = res.data.total;
        this.loading1 = false;
      });
    },
    searchRec() {
      this.pageNum1 = 1;
      this.getRecord(
        this.recordId,
        this.pageNum1,
        this.pageSize1,
        this.taskName
      );
    },
    // 打开升级记录
    upDateRecord(e) {
      console.log(e);
      this.recordId = e;
      this.dialogUp = true;
      this.getRecord(e, this.pageNum1, this.pageSize1, this.taskName);
    },
    // 获取电表列表
    getMeter(
      pageNum,
      pageSize,
      description,
      iccid,
      imei,
      landlordPhone,
      meterNumber,
      modelId,
      online,
      productId,
      status,
      tenantId,
      ver,
      meterType,
      meterName,
      meterAddress,
      startDate,
      endDate
    ) {
      this.loading = true;
      getMeterApi(
        pageNum,
        pageSize,
        description,
        iccid,
        imei,
        landlordPhone,
        meterNumber,
        modelId,
        online,
        productId,
        status,
        tenantId,
        ver,
        meterType,
        meterName,
        meterAddress,
        startDate,
        endDate
      ).then((res) => {
        if (res.data == null) {
          this.pageNum = this.pageNum - 1;
          if (this.pageNum > 0) {
            this.search();
          } else {
            this.loading = false;
            if (res.data) {
              this.total = res.data.total;
              this.tableData = res.data.rows;
            } else {
              this.tableData = [];
            }
          }
        } else {
          this.total = res.data.total;
          this.loading = false;
          this.tableData = res.data.rows;
        }
      });
    },
    // 分页
    handleSizeChange1(val) {
      this.getRecord(this.recordId, this.pageNum1, val, this.taskName);
      sessionStorage.setItem("pageSize1", val);
      this.pageSize1 = val;
    },
    handleCurrentChange1(val) {
      this.getRecord(this.recordId, val, this.pageSize1, this.taskName);
      sessionStorage.setItem("pageNum1", val);
      this.pageNum1 = val;
    },
    // 分页 pagesize
    handleSizeChange(val) {
      let arr = this.modelIds;
      let arr2 = this.vers;
      if (this.modelIds.length !== 0) {
        this.modelIds = this.modelIds.join();
      }
      if (this.vers.length !== 0) {
        this.vers = this.vers.join();
      }
      this.pageNum = 1;
      this.getMeter(
        this.pageNum,
        val,
        this.description,
        this.iccid,
        this.imei,
        this.landlordPhone,
        this.meterNumber,
        this.modelIds,
        this.online,
        this.productId,
        this.status,
        this.tenantId,
        this.ver,
        this.vers,
        this.meterType,
        this.meterName,
        this.meterAddress,
        this.startDate,
        this.endDate
      );
      sessionStorage.setItem("pageSize", val);
      this.pageSize = val;
      this.modelIds = arr;
      this.vers = arr2;
      this.$refs.isExpand[0].bodyWrapper.scrollTop = 0;
    },
    // pageNum
    handleCurrentChange(val) {
      let arr = this.modelIds;
      let arr2 = this.vers;
      if (this.modelIds.length !== 0) {
        this.modelIds = this.modelIds.join();
      }
      if (this.vers.length !== 0) {
        this.vers = this.vers.join();
      }
      this.getMeter(
        val,
        this.pageSize,
        this.description,
        this.iccid,
        this.imei,
        this.landlordPhone,
        this.meterNumber,
        this.modelIds,
        this.online,
        this.productId,
        this.status,
        this.tenantId,
        this.ver,
        this.vers,
        this.meterType,
        this.meterName,
        this.meterAddress,
        this.startDate,
        this.endDate
      );
      sessionStorage.setItem("pageNum", val);
      this.pageNum = val;
      this.modelIds = arr;
      this.vers = arr2;
      this.$refs.isExpand[0].bodyWrapper.scrollTop = 0;
    },
    // 高级搜索
    searchDialog() {
      this.DialogVisibleSearch = false;
    },
    // 查找
    search() {
      let arr = this.modelIds;
      let arr2 = this.vers;
      if (this.modelIds.length !== 0) {
        this.modelIds = this.modelIds.join();
      }
      if (this.vers.length !== 0) {
        this.vers = this.vers.join();
      }
      this.getMeter(
        this.pageNum,
        this.pageSize,
        this.description,
        this.iccid,
        this.imei,
        this.landlordPhone,
        this.meterNumber,
        this.modelIds,
        this.online,
        this.productId,
        this.status,
        this.tenantId,
        this.ver,
        this.vers,
        this.meterType,
        this.meterName,
        this.meterAddress,
        this.startDate,
        this.endDate
      );
      this.modelIds = arr;
      this.vers = arr2;
      this.$refs.isExpand[0].bodyWrapper.scrollTop = 0;
    },
    // 关闭弹出框
    close() {
      this.textarea = "";
      this.editDialogVisible = false;
    },
    // 打开修改备注
    edit(e) {
      this.editId = e.meterId;
      this.editDialogVisible = true;
      this.textarea = "";
    },
    // 确认修改备注
    editFn() {
      let arr = {
        description: this.textarea,
      };
      editDesApi(this.editId, arr).then((res) => {
        this.editDialogVisible = false;
        this.$message.success("操作成功");
        this.search();
        this.textarea = "";
      });
    },
    // 详情
    more(e) {
      this.moreDetail = true;
      this.moreData = e;
      let company =
        e.tenantName == "京凡智能"
          ? "https://www.jdzndl.com?"
          : e.tenantName == "程思物联"
            ? "https://system.ori-iot.com?"
            : e.tenantName == "浙江弘倡新能源科技"
              ? "http://hc.ori-iot.com?"
              : e.tenantName == "美家智控"
                ? "http://mjzk.ori-iot.com?"
                : e.tenantName == "玛尚物联"
                  ? "http://mswl.ori-iot.com?"
                  : e.tenantName == "八戒水电"
                    ? "http://bajie.ori-iot.com?"
                    : ''
      console.log(company);
      this.$nextTick(() => {
        if (this.qrcode) {
          this.$refs.qrCodeUrl.innerHTML = "";
        }
        this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: `${company}meterNumber=${e.meterNumber}`, // 需要转换为二维码的内容
          width: 100,
          height: 100,
          colorDark: "#000000",
          colorLight: "#ffffff",
        });
      });
    },
  },
};
</script>
  
<style lang="scss" scoped>
.dev {
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);

  .search {
    margin-bottom: 15px;

    .el-input {
      width: 200px;
      margin: 5px;
    }

    .el-select {
      width: 200px;
      margin: 5px;
    }

    .el-button {
      margin-left: 15px;
    }
  }

  .el-tabs {
    height: 90%;

    /deep/ .el-tabs__content {
      height: 100%;

      .el-tab-pane {
        height: 70%;
      }
    }
  }

  .table {
    height: 100%;

    .el-table {
      height: 100%;
    }

    /deep/ .el-table__row {
      .el-table__cell {
        .cell {
          display: flex;
          justify-content: space-around;

          button {
            margin: 0;
          }
        }
      }
    }

    .el-pagination {
      text-align: center;
      margin-top: 20px;
    }
  }

  /deep/ .el-descriptions-item__cell {
    text-align: center;
  }

  .searchMore {
    .el-dialog {
      .el-dialog__body {
        .el-form {
          display: flex;
          flex-wrap: wrap;
        }
      }
    }
  }
}
</style>